<template>
  <div class="container-box">
    <el-row :gutter="10">
      <el-col :md="16">
        <el-row :gutter="10">
          <el-col :sm="24" :md="12">
            <el-card style="max-width: 100%" shadow="hover">
              <template #header>
                <span style="font-size: 15px; font-weight: bold;">快捷入口</span>
              </template>
              <ul class="kjrk">
                <li @click="openTab({ name: '样木管理', path: '/admin/dataManage/tree' })">
                  <svg-icon icon="tree" /><br>
                  <span>样木管理</span>
                </li>
                <li @click="openTab({ name: '数据汇总', path: '/admin/dataManage/totals' })">
                  <svg-icon icon="total" /><br>
                  <span>数据汇总</span>
                </li>
                <li @click="openTab({ name: '树种管理', path: '/admin/field/treeSpecies' })">
                  <svg-icon icon="tree-forest" /><br>
                  <span>树种管理</span>
                </li>
                <li @click="openTab({ path: '/admin/monitoring', name: '监控页' });">
                  <svg-icon icon="screen-monitor" /><br>
                  <span>监控页</span>
                </li>
                <li @click="openTab({ name: '样地管理', path: '/admin/field/sampleArea' })">
                  <svg-icon icon="tree-area" /><br>
                  <span>样地管理</span>
                </li>
                <li @click="openTab({ path: '/admin/system/user', name: '用户管理' });">
                  <svg-icon icon="user" /><br>
                  <span>用户管理</span>
                </li>
              </ul>
            </el-card>
          </el-col>
          <el-col :sm="24" :md="12">
            <el-card style="max-width: 100%" shadow="hover">
              <template #header>
                <span style="font-size: 15px; font-weight: bold;">待办事项</span>
              </template>

              <ul class="daiban">
                <li>
                  <p>待录入直径样木</p>
                  <!-- <span>{{ daiban.dia }}</span> -->
                  <el-statistic :value="output_dia" />
                </li>
                <li>
                  <p>待录入鲜重样木</p>
                  <el-statistic :value="output_fw" />
                </li>
                <li>
                  <p>待录入干重样木</p>
                  <el-statistic :value="output_dw" />
                </li>
                <li>
                  <p>待录入样品记录样木</p>
                  <span>{{ daiban.record }}</span>
                </li>
                <!-- <li>
                  <p>待录入样品记录样木</p>
                  <el-statistic :value="output_fw" />
                </li> -->

              </ul>

              <el-empty v-if="daiban.dia < 0" :image-size="82" description="" style="padding: 15px 0;" />
              <!-- 待录入样木直径，鲜重，干重，样品记录 -->
            </el-card>
          </el-col>
          <el-col :md="24">
            <el-card style="max-width: 100%" shadow="hover">
              <template #header><span style="font-size: 15px; font-weight: bold;">数据概览</span></template>

              <el-skeleton :rows="4" animated />

            </el-card>
          </el-col>
        </el-row>
      </el-col>

      <el-col :md="8">
        <el-row :gutter="0">
          <el-col :xs="24">
            <el-card style="max-width: 100%" shadow="hover" class="card">
              <template #header><span style="font-size: 15px; font-weight: bold;">版本信息</span></template>
              <el-descriptions :column='1' label-width="80px" align="center" border>
                <el-descriptions-item label="页面模式">单页面</el-descriptions-item>
                <el-descriptions-item label="涉及技术">Django / vue / layui-vue / 前后端分离</el-descriptions-item>
                <el-descriptions-item label="数据库">db.sqlite3</el-descriptions-item>
                <el-descriptions-item label="主要特色">单页面 / 响应式 / 清爽 / 极简</el-descriptions-item>
                <el-descriptions-item label="地点">中国 / 广西壮族自治区 / 南宁市</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>

          <el-col :xs="24">
            <el-card style="max-width: 100%" shadow="hover" class="card">
              <template #header><span style="font-size: 15px; font-weight: bold;">系统信息统计</span></template>
              <el-descriptions :column=1 label-width="80px" align="center" border>
                <el-descriptions-item label="页面模式">单页面</el-descriptions-item>
                <el-descriptions-item label="涉及技术">Django / vue / layui-vue / 前后端分离</el-descriptions-item>
                <el-descriptions-item label="主要特色">单页面 / 响应式 / 清爽 / 极简</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import api, { getServerUrl } from "@/util/request";
import { ref, watch } from "vue";
import { useTransition } from '@vueuse/core'
import router from '@/router'

// 获取全局状态管理信息
import { useTabsStore } from '@/stores/tabs';
const tabsStore = useTabsStore()

const openTab = (item) => {
  router.push(item.path)
  tabsStore.ADD_TABS(item)
}
// 待录入样木直径，鲜重，干重，样品记录
const daiban = ref({
  dia: 0,
  fw: 0,
  dw: 0,
  record: 0
})

const dia = ref(0)
const fw = ref(0)
const dw = ref(0)

const output_fw = useTransition(fw, {
  duration: 1000,
})
const output_dw = useTransition(dw, {
  duration: 1000,
})
const output_dia = useTransition(dia, {
  duration: 1000,
})

const initDaiban = async () => {
  await api.post('treefw/getnofwtree').then((res) => {
    if (res.data.code == 200) {
      // 更新数据
      daiban.value.fw = res.data.total
      fw.value = res.data.total
    }
  })
  await api.post('treedw/getnodwtree').then((res) => {
    if (res.data.code == 200) {
      // 更新数据
      daiban.value.dw = res.data.total
      dw.value = res.data.total
    }
  })
  await api.post('treedia/getnodiatree').then((res) => {
    if (res.data.code == 200) {
      daiban.value.dia = res.data.total
      dia.value = res.data.total
    }
  })
  // await api.get('treedw/getnodwtree').then((res) => {
  //   if (res.data.code == 200) {
  //     daiban.value.dw = res.data.total
  //   }
  // })
  // await api.get('treerecord/getnorecordtree').then((res) => {
  //   if (res.data.code == 200) {
  //     daiban.value.record = res.data.total
  //   }
  // })
}
initDaiban()
</script>

<style lang="scss" scoped>
.el-card {
  --el-card-padding: 10px
}



.kjrk,
.daiban {
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.kjrk li,
.daiban li {
  /* background-color: antiquewhite; */
  border-radius: 5px;
  text-align: center;
  border: 1px solid #e9e9e9;
  background-color: #fefefe;
  min-height: 60px;
  color: #929292;
  font-size: 12px;
  padding: 5px;
  // transition: all 0.1s;
  transition: var(--el-transition-duration);
}

.kjrk li:hover {
  cursor: pointer;
  transform: translateY(-2px);
  color: var(--el-color-primary);
  box-shadow: 2px 2px 10px rgb(0, 0, 0, 0.1);
  background-color: #fff;
}

.kjrk li:hover>svg {
  font-size: 30px;
  color: var(--el-color-primary);
}

.kjrk li svg {
  font-size: 28px;
  font-weight: bold;
  line-height: 50px;
  margin: 5px;
}

.daiban li {
  text-align: left;
}

.daiban li p {
  line-height: 30px;
  margin-left: 10px;
}

.daiban li span {
  font-size: 30px;
  margin-left: 10px;
  color: var(--el-color-primary);
}

::v-deep .el-statistic__content {
  color: var(--el-color-primary);
  margin-left: 10px;
  font-size: 30px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
  margin-bottom: 10px;
}
</style>
